<template>
	<u-sticky bg-color="#FFFFFF">
		<u-tabs :scrollable="false" lineColor="rgb(250,53,52)" :list="tabList" @click="tabClick" :activeStyle="{ color: 'rgb(250,53,52)', fontWeight: 'bold', transform: 'scale(1.05)' }" 
				:inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"></u-tabs>
		<u-line></u-line>
	</u-sticky>
	<view class="pb-safe">
		<view v-for="(item,index) in dataList" :key="item.OrderID">
			<view class="bg-[#FFFFFF]" @click="toDetail(item)">
				<view class="flex flex-row p-[16px] items-center justify-between">
					<text class="text-[14px] text-[#333333]">订单编号：{{item.OrderNo}}</text>
					<u-text size="14" :text="item.StateName" type="error"></u-text>
				</view>
				<u-line></u-line>
				<view class="px-[16px] py-[8px] flex flex-row" v-for="(items,indexs) in item.SkuList" :key="items.SkuID">
					<u-image :src="items.ImageUrl[0]" radius="8" class="flex-shrink-0" width="100" height="100"></u-image>
					<view class="flex-1 ml-[8px]">
						<view class="text-[14px] text-[#333333]">{{items.ProductName}}</view>
						<view class="text-[12px] text-[#999999] mt-[4px]" v-if="items.SkuName">{{items.SkuName}}</view>
						<view class="flex flex-row justify-between text-[12px] text-[#333333] mt-[10px]">
							<u-text size="12" mode="price" :text="items.MemberPrice"></u-text>
							<u-text size="12" :text="`x${items.Num}`"></u-text>
						</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="text-[12px] px-[16px]">
					<text class="text-[#999999]">创建时间：</text>
					<text class="text-[#333333]">{{item.AddDate}}</text>
				</view>
				<u-line margin="10px 0 0 0"></u-line>
				<view class="flex flex-row justify-end pt-[16px] pb-[8px]">
					<u-button v-if="item.State == 0 && false" :customStyle="{margin:'0 4px',height:'32px'}" text="修改地址" plain shape="circle"></u-button>
					<!-- <u-button @click="cancel(item)" v-if="item.State == 0" :customStyle="{margin:'0 4px',height:'32px'}" text="取消" plain shape="circle"></u-button> -->
					<u-button @click="confirm(item)" v-if="item.State == 2" :customStyle="{margin:'0 4px',height:'32px'}" text="确认收货" type="error" shape="circle"></u-button>
					<!-- <u-button @click="logistics(item)" v-if="item.State == 2 || item.State == 3" :customStyle="{margin:'0 4px',height:'32px'}" text="查看物流" type="error" shape="circle"></u-button>
					<u-button @click="pay(item)" v-if="item.State == 0" :customStyle="{margin:'0 4px',height:'32px'}" text="继续付款" type="error" shape="circle"></u-button> -->
				</view>
			</view>
			<u-gap height="10" v-if="index < dataList.length - 1"></u-gap>
		</view>
		<u-loadmore :status="isLoading ? 'loading' : hasMore ? 'loadmore' : 'nomore'" line></u-loadmore>
	</view>
</template>

<script setup>
	import {nextTick, ref, unref} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	const tabCurrent = ref(0);
	
	const tabList = ref([{
		name: '全部',
		value: ''
	}, {
		name: '待付款',
		value: 0
	}, {
		name: '待发货',
		value: 1
	}, {
		name: '待收货',
		value: 2
	}, {
		name: '已完成',
		value: 3
	}])
	
	const tabClick = e => {
		if(unref(tabCurrent) != e.index) {
			tabCurrent.value = e.index
			query.value.state = unref(tabList)[unref(tabCurrent)].value;
			query.value.page = 1;
			getData();
		}
	}
	
	const dataList = ref([]);
	const query = ref({
		page:1,
		pagesize:10,
		state: ''
	})
	const isLoading = ref(false);
	const hasMore = ref(false);
	
	uniapp.onShow(() => {
		query.value.page = 1;
		getData();
	})
	
	uniapp.onPullDownRefresh(async() => {
		if(!unref(isLoading)) {
			query.value.page = 1;
			getData();
		} else {
			uni.showToast({
				icon:'none',
				title:'正在加载中，请稍后再试'
			})
			await uni.$u.sleep(200);
			uni.stopPullDownRefresh();
		}
	})
	
	uniapp.onReachBottom(() => {
		if(!unref(isLoading) && unref(hasMore)) {
			query.value.page = query.value.page + 1;
			getData();
		}
	})
	
	const getData = async() => {
		isLoading.value = true;
		const result = await api.orderList(store.user.UserID,unref(query));
		isLoading.value = false;
		uni.stopPullDownRefresh();
		await nextTick();
		if(result[1]) {
			uni.showToast({
				icon:'none',
				title:result[1]
			})
			query.value.page = Math.max(1, query.value.page - 1);
		} else {
			hasMore.value = query.value.page < result[0].pagecount
			if(query.value.page == 1) {
				dataList.value = result[0].data
				uni.pageScrollTo({
					scrollTop:0,
					duration:0
				})
			} else {
				dataList.value = dataList.value.concat(result[0].data)
			}
		}
	}
	
	const toDetail = item => {
		uni.navigateTo({
			url:`/pages/order/orderDetail?id=${item.OrderID}`
		})
	}
	
	const cancel = item => {
		uni.showModal({
			content:'确定要取消该订单吗？',
			async success(res) {
				if(res.confirm) {
					uni.showLoading();
					const result = await api.cancelOrder(store.user.UserID, item.OrderID);
					uni.hideLoading();
					await nextTick();
					if(result[1]) {
						uni.showToast({
							icon:'none',
							title:result[1]
						})
					} else {
						uni.showToast({
							icon:'success',
							title:'取消成功'
						})
						await uni.$u.sleep(500);
						query.value.page = 1;
						getData();
					}
				}
			}
		})
	}
	
	const confirm = item => {
		uni.showModal({
			content:'确定已经收到货物了吗？',
			async success(res) {
				if(res.confirm) {
					uni.showLoading();
					const result = await api.finishOrder(store.user.UserID, item.OrderID);
					uni.hideLoading();
					await nextTick();
					if(result[1]) {
						uni.showToast({
							icon:'none',
							title:result[1]
						})
					} else {
						uni.showToast({
							icon:'success',
							title:'确认收货成功'
						})
						await uni.$u.sleep(500);
						query.value.page = 1;
						getData();
					}
				}
			}
		})
	}
	
	const pay = async item => {
		uni.showLoading();
		const res = await api.pay(store.user.UserID,item.OrderID);
		uni.hideLoading();
		await nextTick();
		if(res[1]) {
			uni.showToast({
				icon:'none',
				title:res[1]
			})
		} else {
			//拉起支付
			if(res[0]) {
				
			} else {
				uni.showToast({
					icon:'success',
					title:'支付成功'
				})
				await uni.$u.sleep(500);
				query.value.page = 1;
				getData();
			}
		}
	}
	
	const logistics = item => {
		uni.navigateTo({
			url:`/pages/logistics/logistics?orderId=${item.OrderID}&logisticsNo=${item.LogisticsNo}&logisticsName=${item.LogisticsName}`
		})
	}
</script>
<style></style>